<template>
	<div>
		<div class="publish-top">
			<div class="left-icon" @click="onHandleBack"> 
				<img src="../../../assets/images/left.png"/>
			</div>
			<p>修改资料</p>
		</div>
		<div class="set-content">
			<ul class="set-list">
				<li >
					<span>头像</span>
				  	<div class="right">
				  		<input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>
						<div class="handimgs">
							<img :src="infoData.user_himg ? handimg : pic" id="img"/>
						</div>
						
						<img class="message" src="../../../assets/images/message/message-icon.png"/>
					</div>

				</li>
				<li @click="handleName">
					<span>昵称</span>
					<div class="right">
						<p>{{name}}</p>
						<img class="message" src="../../../assets/images/message/message-icon.png"/>
					</div>
					
				</li>
				<li>
					<span>性别</span>
					<div class="right">
						<select name="" @change="changeSex">
							<option >男</option>
							<option >女</option>
						</select>
						<img class="message" src="../../../assets/images/message/message-icon.png"/>
					</div>
				</li>
				<li @click="handleArea"> 
					<span>地区</span>
					<div class="right">
						<p>{{areas}}</p>
						<img class="message" src="../../../assets/images/message/message-icon.png"/>
					</div>
				</li>
				<li>
					<span>背景</span>
					  	<div class="right">
					  		<input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update2"/>
							<div class="handimgs handimg2">
								<img :src="bgimg" id="imgs"/>
							</div>
							<img class="message" src="../../../assets/images/message/message-icon.png"/>
						</div>
				</li>
				<li @click="handleSign">
					<span>个性签名</span>
					<div class="right">
						<p id="desc_rig">{{infoData.user_desc}}</p>
						<img class="message" src="../../../assets/images/message/message-icon.png"/>
					</div>
				</li>
			</ul>
			<div id="mask" v-bind:style="{display : block}" @click="handleBlock"></div>
			<div class="popup" v-bind:style="{display : block}">
				<input type="text" placeholder="请输入昵称~" @change="changeName"/>
				<div class="sure" @click="handleSure">确定</div>
			</div>
		</div>
		<van-popup v-model="show" position="bottom">
		  	<van-area :area-list="areaList" value="code" @confirm="confirm" @cancel="cancel"/>
		</van-popup>
	</div>
</template>

<script>
	import { Area,Popup} from 'vant';
	import pic from '../../../assets/default.jpg';
	import bg from '../../../assets/bg.png';
	import axios from "axios";
	import user from '../../../utils/isLogin';
	import areaList from './Area';
	import lrz from 'lrz';
	export default{
		data(){
			return{
				infoData:{},
				sex: '',
				location :'',
				name:'',
				handimg:'',
				pic: pic,
				bg: bg,
				bgimg:'',
				areaList : areaList,
				show: false,
				areas :'',
				block : 'none',
				nick:'',
				isClick:true
			}
		},
		created(){
			
			var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
			//用户信息
			if(userId){
				axios.post(user.src + '/index/user/get_user_information' , {
					userid: userId,
				})
				.then((res) => {
					var list = res.data;
					if(list.status == 200){
						this.infoData = list.data;
						this.handimg = list.data.user_himg,
						this.name = list.data.user_nickname,
						this.bgimg = list.data.user_img;
						this.areas = list.data.user_area;
					}else{
						plus.nativeUI.toast('获取信息失败~')
					}	
				})
				.catch((error) => {   
				});
			}
			//地区
			let plusReady = ()=>{
				
			}
			if (window.plus) {
		      plusReady();
		    } else {
		      document.addEventListener("plusready", plusReady, false);
		    }
		},
		components:{
			[Area.name]: Area,
			[Popup.name]: Popup
		},
		methods:{			
			onHandleBack(){
				var modify = plus.webview.currentWebview();
				plus.webview.close(modify);
			},
			//跳转个性签名
			handleSign (){
				if(this.isClick){
					this.isClick = false;
					var signature = plus.webview.create('signature.html','signature',{},{});
					signature.addEventListener("loaded", ()=> {
					    signature.show('pop-in', 100);
					    this.isClick = true;
					    signature = null;
					}, false);
				}
			},

			changeSex(e){
				var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
				
				axios.post(user.src + '/index/user/edit_user_sex' , {
					id: userId,
					sex: e.target.value
				})
				.then( (res) => {
					
				})
				.catch( (error) => {
				   
				});
			},
			//上传头像
			update(e) {
				var self = this;
				var userInfo = JSON.parse(window.localStorage.getItem( 'userInfo' ));
				if(userInfo == undefined || userInfo == null){
						return
				}
				var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
			   var file = e.target.files[0];		
				let params = {
					id : userId
				}
				lrz(file)
	         .then(function (rst) {
	            // 处理成功会执行
	            params.headImg = rst.base64;
               if (!params.headImg) {
               	plus.nativeUI.toast('请先上传图片');
                	return
	            } 
               axios.post(user.src + '/index/user/edit_user_profile', params)
               .then( res =>{
						var res = res.data;
						if(res.status == 200){
							document.getElementById('img').setAttribute( 'src',params.headImg );
						}else{
							plus.nativeUI.toast('编辑失败')
						}
              	});
	         })
	         .catch(function (err) {
	            // 处理失败会执行
	         })
	         .always(function () {
	            // 不管是成功失败，都会执行
	         });
		   	},
		   	//上传背景图
		   	update2(e) {
				var self = this;
				var userInfo = JSON.parse(window.localStorage.getItem( 'userInfo' ));
			
				if(userInfo == undefined || userInfo == null || userInfo == 'null' || userInfo == ''){
						return
				}
				var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
				
			    var file = e.target.files[0];
			    
				let params = {
					id : userId
				}
				lrz(file)
		        .then(function (rst) {
		            // 处理成功会执行
		            params.img = rst.base64;

                    if (!params.img) {
		                plus.nativeUI.toast('请先上传图片');
		                return
		            } 
                   axios.post(user.src + '/index/user/edit_user_img', params)
	               .then( res =>{
							var res = res.data;
							if(res.status == 200){
								
								document.getElementById('imgs').setAttribute( 'src',params.img );
					
							}else{
								plus.nativeUI.toast('编辑失败')
							}
	              });
		        })
		        .catch(function (err) {
		            // 处理失败会执行
		        })
		        .always(function () {
		            // 不管是成功失败，都会执行
		        });
		   	},
			//选择地址
		   	handleArea (){
		   		this.show = true;
		   		this.block = 'none';
		   	},
		   	confirm (e){
		   		var arr = e;
		   		var str;
	   			var province = arr[0].name;
					str = province ;
	   			if(arr[1] !== undefined){
	   				var city =  arr[1].name;
	   				str = province + city;
	   			}
	   			if(arr[2] !== undefined){
	   				var are = arr[2].name;
	   				str = province + city + are;
	   			}	   	
	   			var userInfo = JSON.parse(window.localStorage.getItem( 'userInfo' ));
				if(userInfo == undefined || userInfo == null || userInfo == 'null' || userInfo == ''){
						return
				}
				var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
		
		   		axios.post(user.src + '/index/user/edit_user_area' , {
					id: userId,
					area: str
				})
				.then( (res) => {
					var res = res.data;
					if(res.status == 200){
						this.show = false;
						this.areas = str;
					}
					if(res.status == 1027){
						this.show = false;
					}
				})
				.catch( (error) => {
				   	this.show = false;
				});
		   		
		   	},
		   	cancel (){
		   		this.show = false;
		   	},
		  	handleName (){
		  		this.block = 'block';
		  	},
		  	// 输入昵称
		  	changeName (e){
		  		this.nick = e.target.value;
		  	},
		  	//确定修改
		  	handleSure (){
		  		var nick = this.nick;
		  		if(nick == ''){
		  			return
		  		}
		  		var userInfo = JSON.parse(window.localStorage.getItem( 'userInfo' ));
			
				if(userInfo == undefined || userInfo == null || userInfo == 'null' || userInfo == ''){
						return
				}
				var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
		  		axios.post(user.src + '/index/user/edit_user_nickname' , {
					id: userId,
					username: nick
				})
				.then( (res) => {
					var res = res.data;
					if(res.status == 200){
						this.block = 'none';
						this.name = nick
					}else{
						this.block = 'none';
						plus.nativeUI.toast('编辑失败')
					}
				})
				.catch( (error) => {
				   	this.block = 'none';
				});
		  	},
		  	//关闭
		  	handleBlock (){
		  		this.block = 'none';
		  	},
		}
	}
	
	
</script>


<style lang='less'>

html,body{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		background: #f6f6f6;

	}

	*{
		margin: 0;
		padding: 0;
	}
	ul,li{
		list-style: none;
	}
	.publish-top{
		width: 100%;
		height: 60px;
		background:@default-blue;
		box-shadow: 0px 0px 8px 1px #999;
		padding-top: 70px;
		display:flex;				
		.left-icon{
			width: 90px;
			img{
				width: 15px;
				height: 26px;
				margin-left: 31px;
			}
		}
		p{		
			width: 80%;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
		span{
			display: block;
			width: 170px;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
	}
	.van-area{
		font-size: 30px !important;
		padding: 20px 20px !important;
	}
	.van-picker-column{
		font-size: 24px !important;
	}
	.set-content{
		position: relative;
		width: 100%;
		#mask{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #000000;
			opacity: .3;
			z-index: 8;
		}
		.popup{

			position: fixed;
			top: 30%;
			left: 50%;
			margin-left: -250px;
			width: 500px;
			height: 230px;
			border:0.1rem  solid #C1C1C1 ;
			border-radius: 10px;
			z-index: 9;
			background: #fff;
			
			input{
				display: block;
				margin: 30px auto;
				width: 400px;
				height: 60px;
				font-size: 20px;
				color: #333;
			}
			.sure{
				margin: 0 auto;
				display: block;
				text-align: center;
				color: #fff;
				width: 200px;
				height: 60px;
				line-height: 60px;
				background: #008BFF;
				border-radius: 20px;
			}
		}

		.set-list{
			margin-bottom: 42px;
			padding: 0 24px;
			background: #fff;
			
			li{
				height: 148px;
				line-height: 148px;
				border-bottom: 0.1rem  solid #eeeeee;
				display: flex;
				justify-content: space-between;
				
				span{
					font-size: 28px;
					color: #333;
				}

				input{
					/*border: none;*/
					outline: none;
					width: 50%;
					margin-top: 40px;
					height: 60px;
					font-size: 20px;
					color: #333;
				}
				.right{
					display: flex;
					position: relative;
					
					p{
						width:300px;
						font-size: 28px;
						color: #333;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						text-align: right;
					}
					select{
						padding-left: 460px;
						background: #fff;
						border: none;
						outline: none;
						appearance:none;
					}
					.message{
						margin: 58px 0 0 18px;
						display: block;
						width: 16px;
						height: 27px;
					}
					input{
						width: 80%;
						position: absolute;
		            left: 0px;
		            top: 0px;
		            opacity: 0;
		            -ms-filter: 'alpha(opacity=0)';
					}
					
				}

					
					.right{
							float: right;
							display: flex;
							
						.handimgs{
							margin-top: 24px;
							width: 102px;
							height: 102px;
							border-radius: 50%;
							
							img{
								display: block;
								width: 102px;
								height: 102px;
								border-radius: 50%;
							}
						}
						
						.handimg2{
							border-radius: 5px;
							background:@default-blue;
							img{
								background:@default-blue;
								border-radius: 5px;
							}
						}
						
						
						.message{
							margin: 58px 0 0 18px;
							display: block;
							width: 16px;
							height: 27px;
						}
					}
				

				
				
				p{
					font-size: 28px;
					color: #333;
				}
				
				.message{
					margin: 58px 0 0 18px;
					display: block;
					width: 16px;
					height: 27px;
				}
				
				
			}
			
		}
		
		.out{
			width: 100%;
			height: 178px;
			line-height: 178px;
			font-size: 28px;
			color: #333;
			text-align: center;
			background: #fff;
		}
	}
	
	
</style>
